jsPlumbInstance

This class models an instance of jsPlumb. The global object jsPlumb is both a static module and an instance of this class, and it is an instance of this class that is returned from jsPlumb.getInstance. A jsPlumbInstance manages a set of Endpoints and Connections.

new jsPlumbInstance()

Source:
  • jsplumb-api.js, line 1

Extends

Methods

addEndpoint(el, params, referenceParams) → {Object|Array}

Adds an Endpoint to a given element or elements.

Parameters:
Name Type Argument Description
el String | Object | Array

Element to add the endpoint to. Either an element id, a selector representing some element(s), or an array of either of these.

params Object <optional>

Object containing Endpoint constructor arguments. For more information, see Endpoint

referenceParams Object <optional>

Object containing more Endpoint constructor arguments; it will be merged with params by jsPlumb. You would use this if you had some shared parameters that you wanted to reuse when you added Endpoints to a number of elements. The allowed values in this object are anything that 'params' can contain. See <Endpoint>.

Source:
  • jsplumb-api.js, line 9
See:
Returns:

The newly created Endpoint, if el referred to a single element. Otherwise, an array of newly created Endpoints.

Type
Object | Array

addEndpoints(target, endpoints, referenceParams) → {Array}

Adds a list of Endpoints to a given element or elements.

Parameters:
Name Type Argument Description
target String | Object | Array

Element to add the Endpoint to. Either an element id, a selector representing some element(s), or an array of either of these.

endpoints Array

List of objects containing Endpoint constructor arguments. one Endpoint is created for each entry in this list. See Endpoint's constructor documentation.

referenceParams Object <optional>

Object containing more Endpoint constructor arguments; it will be merged with params by jsPlumb. You would use this if you had some shared parameters that you wanted to reuse when you added Endpoints to a number of elements.

Source:
  • jsplumb-api.js, line 11
See:
Returns:

List of newly created Endpoints, one for each entry in the endpoints argument.

Type
Array

animate(el, properties, options)

This is a wrapper around the supporting library's animate function; it injects a call to jsPlumb in the 'step' function (creating the 'step' function if necessary). This only supports the two-arg version of the animate call in jQuery, the one that takes an 'options' object as the second arg. MooTools has only one method, a two arg one. Which is handy. YUI has a one-arg method, so jsPlumb merges 'properties' and 'options' together for YUI.

Parameters:
Name Type Argument Description
el String | Element | Selector

Element to animate. Either an id, or a selector representing the element.

properties Object <optional>

The 'properties' argument you want passed to the library's animate call.

options Object <optional>

The 'options' argument you want passed to the library's animate call.

Source:
  • jsplumb-api.js, line 23

bind(event, listener)

Binds a listener to an event.

Parameters:
Name Type Description
event String

Name of the event to bind to.

listener Function

Function to execute.

Inherited From:
Source:
  • util-api.js, line 21

cleanupListeners()

Removes all listeners.

Inherited From:
Source:
  • util-api.js, line 28

connect(params, referenceParams) → {Connection}

Establishes a Connection between two elements (or Endpoints, which are themselves registered to elements).

Parameters:
Name Type Description
params Object

Connection params

Properties
Name Type Description
source String | Object | Endpoint

Source of the connection. May be an id, or an element, or an Endpoint.

target String | Object | Endpoint

Target of the connection. May be an id, or an element, or an Endpoint.

referenceParams Object

Optional second set of parameters, which will be merge into a new object along with params. This can be useful if you have some common settings to share between multiple connect calls.

Source:
  • jsplumb-api.js, line 13
Returns:

The Connection that was created.

Type
Connection

deleteEndpoint(object, doNotRepaintAfterwards) → {jsPlumbInstance}

Deletes an Endpoint and removes all Connections it has (which removes the Connections from the other Endpoints involved too)

Parameters:
Name Type Argument Default Description
object String | Endpoint

Either a string, representing the endpoint's uuid, or an Endpoint.

doNotRepaintAfterwards Boolean <optional>
false

Indicates whether or not to repaint everything after this call.

Source:
  • jsplumb-api.js, line 138
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

deleteEveryEndpoint() → {jsPlumbInstance}

Deletes every Endpoint and their associated Connections. Distinct from jsPlumbInstance#reset because we dont clear listeners here, so for that reason this function is often the best way to reset a jsPlumb instance.

Source:
  • jsplumb-api.js, line 139
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

detach(connection, params) → {boolean}

Detaches a Connection.

Parameters:
Name Type Argument Description
connection Connection

The Connection to detach

params Object <optional>

Optional parameters to the detach call.

Properties
Name Type Argument Default Description
fireEvent Boolean <optional>
false

Indicates you want jsPlumb to fire a connection detached event. The thinking behind this is that if you made a programmatic call to detach an event, you probably don't need the callback.

forceDetach Boolean <optional>
false

Allows you to override any beforeDetach listeners that may be registered.

Source:
  • jsplumb-api.js, line 128
Returns:

True if successful, false if not.

Type
boolean

detachAllConnections(el, params) → {jsPlumbInstance}

Removes all an element's Connections.

Parameters:
Name Type Argument Description
el Object

Either the id of the element, or a selector for the element.

params Object <optional>

Optional parameters.

Properties
Name Type Argument Default Description
fireEvent Boolean <optional>
true

Whether or not to fire the detach event.

Source:
  • jsplumb-api.js, line 132
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

detachEveryConnection(params) → {jsPlumbInstance}

Remove all Connections from all elements, but leaves Endpoints in place ((unless a connection is set to auto delete its Endpoints).

Parameters:
Name Type Argument Description
params Object <optional>

optional params object for the call

Properties
Name Type Argument Default Description
fireEvent Boolean <optional>
true

Whether or not to fire detach events

Source:
  • jsplumb-api.js, line 133
See:
Returns:

The current jsPlumb Instance

Type
jsPlumbInstance

doWhileSuspended()

Suspends drawing, runs the given function, then re-enables drawing (and repaints, unless you set 'doNotRepaintAfterwards' to true)

Source:
  • jsplumb-api.js, line 21

draggable(el, options) → {jsPlumbInstance}

Initialises the draggability of some element or elements. You should use this instead of your library's draggable method so that jsPlumb can setup the appropriate callbacks. Your underlying library's drag method is always called from this method.

Parameters:
Name Type Argument Description
el Object

Either an element id, a list of element ids, or a selector.

options Object <optional>

Options to pass through to the underlying library. A common use case in jQueryUI, for instance, is to provide a containment parameter:

    `jsPlumb.draggable("someElementId", {
       containment:"parent"
     });`
Source:
  • jsplumb-api.js, line 134
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

getAllConnections() → {Object}

Source:
  • jsplumb-api.js, line 53
Returns:

All connections, as a map of the form:

{ scope -> [ connection... ] }

Type
Object

getConnections() → {Array|Map}

Gets all or a subset of connections currently managed by this jsPlumb instance. If only one scope is passed in to this method, the result will be a list of connections having that scope (passing in no scope at all will result in jsPlumb assuming you want the default scope).

If multiple scopes are passed in, the return value will be a map of

{ scope -> [ connection... ] }

Parameters:

 - scope    -    if the only argument to getConnections is a string, jsPlumb will treat that string as a scope filter, and return a list
             of connections that are in the given scope. use '*' for all scopes.
 - options    -    if the argument is a JS object, you can specify a finer-grained filter:

         -    *scope* may be a string specifying a single scope, or an array of strings, specifying multiple scopes. Also may have the value '*', indicating any scope.
         -    *source* either a string representing an element id, a selector, or an array of ids. Also may have the value '*', indicating any source.  Constrains the result to connections having this/these element(s) as source.
         -    *target* either a string representing an element id, a selector, or an array of ids. Also may have the value '*', indicating any target.  Constrains the result to connections having this/these element(s) as target.         
    flat    -    return results in a flat array (don't return an object whose keys are scopes and whose values are lists per scope).
Source:
  • jsplumb-api.js, line 29
Returns:

If only one scope was requested, a list of Connections that match the criteria. Otherwise, a map of [scope->connection lists].

Type
Array | Map

getDefaultConnectionType()

Returns the default Connection type. Used when someone wants to subclass Connection and have jsPlumb return instances of their subclass. you would make a call like this in your class's constructor:

jsPlumb.getDefaultConnectionType().apply(this, arguments);

Source:
  • jsplumb-api.js, line 27
Returns:

The default Connection function used by jsPlumb.

getDefaultEndpointType()

Returns the default Endpoint type. Used when someone wants to subclass Endpoint and have jsPlumb return instances of their subclass. you would make a call like this in your class's constructor:

jsPlumb.getDefaultEndpointType().apply(this, arguments);

Source:
  • jsplumb-api.js, line 25
Returns:

The default Endpoint function used by jsPlumb.

getDefaultScope() → {String}

Gets the default scope for connections and endpoints.

A scope defines a type of endpoint/connection; supplying a scope to an Endpoint or Connection allows you to support different types of connections in the same UI. but if you're only interested in one type of connection, you don't need to supply a scope. this method will probably be used by very few people; it's good for testing though.

Source:
  • jsplumb-api.js, line 55
Returns:

The default scope for the given jsPlumbInstance

Type
String

getEndpoints(el) → {Endpoint[]}

Gets the list of Endpoints for a given element.

Parameters:
Name Type Description
el String | Element | Selector

The element to get endpoints for.

Source:
  • jsplumb-api.js, line 57
Returns:

An array of Endpoints for the specified element.

Type
Endpoint[]

getSelector(context, spec)

This method takes the given selector spec and, using the current underlying library, turns it into a selector from that library. This method exists really as a helper function for those applications where you're writing jsPlumb code that will target more than one library (such as in the case of the jsPlumb demo pages).

Parameters:
Name Type Argument Description
context Element | Selector <optional>

An element to search from. may be omitted (not null: omitted. as in you only pass one argument to the function)

spec String

A valid selector string.

Source:
  • jsplumb-api.js, line 135

hide(el, changeEndpoints) → {jsPlumbInstance}

Sets an element's connections to be hidden.

Parameters:
Name Type Argument Default Description
el String | Element | Selector

Element to hide connections for.

changeEndpoints Boolean <optional>
false

Whether not to also hide endpoints on the element.

Source:
  • jsplumb-api.js, line 39
Returns:

The jsPlumb instance.

Type
jsPlumbInstance

importDefaults(defaults) → {jsPlumbInstance}

Imports all the given defaults into this instance of jsPlumb.

Parameters:
Name Type Description
defaults Object

The defaults to import.

Source:
  • jsplumb-api.js, line 3
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

isHoverSuspended()

Source:
  • jsplumb-api.js, line 35
Returns:

Whether or not hover effects are currently suspended.

isSource(el) → {Boolean}

Returns whether or not the given element is registered as a connection source.

Parameters:
Name Type Description
el String | Element | Selector

The element in question.

Source:
  • jsplumb-api.js, line 102
Returns:

True if source, false if not.

Type
Boolean

isSourceEnabled(el) → {Boolean}

Returns whether or not the given connection source is enabled.

Parameters:
Name Type Description
el String | Element | Selector

The element in question.

Source:
  • jsplumb-api.js, line 104
Returns:

True if enabled, false if not.

Type
Boolean

isSuspendDrawing()

Returns whether or not drawing is currently suspended.

Source:
  • jsplumb-api.js, line 19
Returns:

True if drawing suspended, false otherwise.

isSuspendEvents() → {Boolean}

Inherited From:
Source:
  • util-api.js, line 27
Returns:

True if events are suspended, false otherwise.

Type
Boolean

isTarget(el) → {Boolean}

Returns whether or not the given element is registered as a connection target.

Parameters:
Name Type Description
el String | Element | Selector

The element in question.

Source:
  • jsplumb-api.js, line 110
Returns:

True if source, false if not.

Type
Boolean

isTargetEnabled(el) → {Boolean}

Returns whether or not the given connection target is enabled.

Parameters:
Name Type Description
el String | Element | Selector

The element in question.

Source:
  • jsplumb-api.js, line 112
Returns:

True if enabled, false if not.

Type
Boolean

makeSource(el, params)

Makes some DOM element(s) a Connection source, allowing you to drag connections from it/them without having to first register any Endpoints. When a Connection is established, the endpoint spec that was passed in to this method is used to create a suitable Endpoint (the default will be used if you do not provide one).

Parameters:
Name Type Description
el String | Element | Selector

String id, element, or element selector for the element(s) to make a source.

params Object

Parameters for the call

Properties
Name Type Argument Default Description
endpoint String | Array <optional>

Specification of an endpoint to create when a connection is created.

parent String | Element <optional>

The element to add Endpoints to when a Connection is established. if you omit this, Endpoints will be added to 'el'.

scope String <optional>

Scope for the connections dragged from this element.

dragOptions Object <optional>

Same stuff as you would pass to dragOptions of an Endpoint definition.

deleteEndpointsOnDetach Boolean <optional>
false

Whether or not to delete any Endpoints created by a connection from this source if the connection is subsequently detached. this will not remove Endpoints that have had more Connections attached to them after they were created.

filter Function <optional>

Function to call when the user presses the mouse button to start a drag. This function is passed the original event and the element on which the associated makeSource call was made. If it returns anything other than false, the drag begins as usual. But if it returns false (the boolean false, not just something falsey), the drag is aborted.

Source:
  • jsplumb-api.js, line 89

makeTarget(el, params)

Makes some DOM element(s) a Connection target, allowing you to drag connections to it/them without having to first register any Endpoints. When a Connection is established, the endpoint spec that was passed in to this method is used to create a suitable Endpoint (the default will be used if you do not provide one).

Parameters:
Name Type Description
el String | Element | Selector

Element(s) to turn into a connection target.

params Object

Parameters for the call

Properties
Name Type Argument Default Description
endpoint String | Array <optional>

Specification of an Endpoint to create when a Connection is established.

scope String <optional>

Scope for the drop zone.

dropOptions Object <optional>

Same stuff as you would pass to dropOptions of an Endpoint definition.

deleteEndpointsOnDetach Boolean <optional>
true

Whether or not to delete any Endpoints created by a connection to this target if the connection is subsequently detached. this will not remove Endpoints that have had more Connections attached to them after they were created.

maxConnections Integer <optional>
-1

Specifies the maximum number of Connections that can be made to this element as a target.

onMaxConnections Function <optional>

Function to call when user attempts to drop a connection but the limit has been reached. The callback signature should look like this: function( { element, connection, maxConnection }, originalEvent )

Source:
  • jsplumb-api.js, line 85

ready(fn)

Helper method to bind a function to jsPlumb's ready event. You should use this method instead of your library's equivalent, to ensure that jsPlumb has loaded properly before you start to use it. This is particularly true in the case of YUI, because of the asynchronous nature of the module loading process.

Parameters:
Name Type Description
fn Function

Function to call once the instance is ready.

Source:
  • jsplumb-api.js, line 114

recalculateOffsets(el)

Recalculates the offsets of all child elements of some element. If you have Endpoints registered on the descendants of some element and you make changes to that element's markup, it is possible that the location of each Endpooint relative to the origin of the element may have changed. So you call this to tell jsPlumb to recalculate. You need to do this because, for performance reasons, jsplumb won't calculate these offsets on the fly.

Parameters:
Name Type Description
el String | Element | Selector

The element for which to recalculate offsets.

Source:
  • jsplumb-api.js, line 47

registerConnectionType(typeId, type)

Registers the given connection type on this instance of jsPlumb.

Parameters:
Name Type Description
typeId String

Id of the type

type Object

Object containing the type specification.

Source:
  • jsplumb-api.js, line 15

remove(el)

Removes the given element from the DOM, along with all Endpoints associated with it, and their connections.

Parameters:
Name Type Description
el String | Element | Selector

The element in question.

Source:
  • jsplumb-api.js, line 122

removeAllEndpoints(el, recurse) → {jsPlumbInstance}

Removes all Endpoints associated with a given element. Also removes all Connections associated with each Endpoint it removes. jsPlumb expects that the element referenced here exists in the DOM. If it does not, or you are uncertain whether it will exist or not, use jsPlumbInstance#remove.

Parameters:
Name Type Argument Default Description
el String | Element | Selector

The element in question.

recurse Boolean <optional>
false

Whether or not to recurse down through this elements children and remove their endpoints too.

Source:
  • jsplumb-api.js, line 120
See:
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

repaint(el) → {jsPlumbInstance}

Repaints an element and its connections. This method gets new sizes for the elements before painting anything.

Parameters:
Name Type Description
el String | Element | Selector

The element in question.

Source:
  • jsplumb-api.js, line 116
See:
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

repaintEverything() → {jsPlumbInstance}

Repaints all connections and endpoints.

Source:
  • jsplumb-api.js, line 118
See:
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

reset()

Removes all endpoints and connections and clears the listener list. To keep listeners call jsPlumbInstance#deleteEveryEndpoint instead of this.

Source:
  • jsplumb-api.js, line 124

restoreDefaults() → {jsPlumbInstance}

Restores the default settings to "factory" values.

Source:
  • jsplumb-api.js, line 5
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

select(params)

Selects a set of Connections, using the filter options from the getConnections method, and returns an object that allows you to perform an operation on all of the Connections at once.

The return value from any of these operations is the original list of Connections, allowing operations to be chained (for 'setter' type operations). 'getter' type operations return an array of values, where each entry is of the form:

[ Connection, return value ]

Parameters:
Name Type Argument Description
params Object <optional>

Filter parameters. All of the values in this object are optional; if you supply no parameters at all you will get back all of the current Connections in the given jsPlumb instance.

Properties
Name Type Argument Description
scope String | Array.<String> <optional>

scope - see getConnections

source String | Array.<String> <optional>

see getConnections

target String | Array.<String> <optional>

see getConnections

connections Connection[] <optional>

an existing list of Connections. If you supply this, 'source' and 'target' will be ignored.

Source:
  • jsplumb-api.js, line 31
Returns:

A list of Connections on which operations may be executed. 'Setter' type operations can be chained; 'getter' type operations return an array of [Connection, value] pairs, one entry for each Connection in the list returned. The full list of operations is as follows (where not specified, the operation's effect or return value is the same as the corresponding method on Connection) :

  • addClass : Adds a class to all the Connections in the list.
  • addOverlay : Adds an Overlay to all the Connections in the list.
  • addType : Adds a type to all the Connections in the list.
  • detach : Detaches all the Connections in the list. Not chainable, and does not return anything.
  • each(function(connection)...) : Allows you to specify your own function to execute; this function is chainable.
  • get(index) : Returns the Connection at 'index' in the list.
  • getHoverPaintStyle
  • getLabel
  • getOverlay
  • getPaintStyle
  • getParameter
  • getParameters
  • getType
  • getZIndex
  • hasType
  • hideOverlay
  • hideOverlays
  • isDetachable
  • isHover
  • isReattach
  • isVisible
  • length : returns the length of the list.
  • removeAllOverlays
  • removeClass
  • removeOverlay
  • removeOverlays
  • removeType
  • repaint
  • setConnector
  • setDetachable
  • setHover
  • setHoverPaintStyle
  • setLabel
  • setPaintStyle
  • setParameter
  • setParameters
  • setReattach
  • setType
  • showOverlay
  • showOverlays

selectEndpoints(params)

Selects a set of Endpoints and returns an object that allows you to execute various different methods on them at once. The return value from any of these operations is the original list of Endpoints, allowing operations to be chained (for 'setter' type operations). 'getter' type operations return an array of values, where each entry is of the form:

`[ Endpoint, return value ]`
Parameters:
Name Type Argument Description
params Object <optional>

Filter parameters.

Properties
Name Type Argument Default Description
scope String | Array.<String> <optional>
jsPlumb.DefaultScope

Scope(s) to match

source String | Element | Selector | Array <optional>

limits returned endpoints to those that are declared as a source endpoint on any elements identified.

target String | Element | Selector | Array <optional>

limits returned endpoints to those that are declared as a target endpoint on any elements identified.

element String | Element | Selector | Array <optional>

limits returned endpoints to those that are declared as either a source OR a target endpoint on any elements identified.

Source:
  • jsplumb-api.js, line 33
Returns:

A list of Endpoints on which operations may be executed. 'Setter' type operations can be chained; 'getter' type operations return an array of [Endpoint, value] pairs, one entry for each Endpoint in the list returned.

The full list of operations is as follows (where not specified, the operation's effect or return value is the same as the corresponding method on Endpoint) :

  • setHover
  • removeAllOverlays
  • setLabel
  • addClass
  • addOverlay
  • removeClass
  • removeOverlay
  • removeOverlays
  • showOverlay
  • hideOverlay
  • showOverlays
  • hideOverlays
  • setPaintStyle
  • setHoverPaintStyle
  • setParameter
  • setParameters
  • setAnchor
  • getLabel
  • getOverlay
  • isHover
  • isDetachable
  • getParameter
  • getParameters
  • getPaintStyle
  • getHoverPaintStyle
  • detachAll : Detaches all the Connections from every Endpoint in the list. not chainable and does not return anything.
  • delete : Deletes every Endpoint in the list. not chainable and does not return anything.
  • length : returns the length of the list.
  • get(index) : returns the Endpoint at 'index' in the list.
  • each(function(endpoint)...) : allows you to specify your own function to execute; this function is chainable.

setDefaultScope(scope) → {jsPlumbInstance}

Sets the default scope for Connections and Endpoints. A scope defines a type of Endpoint/Connection; supplying a scope to an Endpoint or Connection allows you to support different types of Connections in the same UI. If you're only interested in one type of Connection, you don't need to supply a scope. This method will probably be used by very few people; it just instructs jsPlumb to use a different key for the default scope.

Parameters:
Name Type Description
scope String

Scope to set as default.

Source:
  • jsplumb-api.js, line 126
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

setDraggable(el, draggable)

Sets whether or not the given element(s) should be draggable, regardless of what a particular plumb command may request.

Parameters:
Name Type Description
el String | Object | Array

Some identifier for the element(s) - may be a string id, a selector, or an array of ids/selectors

draggable Boolean

Whether or not the given element(s) should be draggable.

Source:
  • jsplumb-api.js, line 7

setHoverSuspended(hover)

Sets whether or not hover effects should be suspended. jsPlumb uses this internally during various drag/drop operations, and it is exposed because it might also be useful for you too.

Parameters:
Name Type Description
hover Boolean

whether or not to set hover suspended.

Source:
  • jsplumb-api.js, line 37

setId(el, newId, doNotSetAttribute)

Changes the id of some element, adjusting all connections and endpoints

Parameters:
Name Type Argument Default Description
el String | Element | Selector

Element to change id on.

newId String

The new id to set.

doNotSetAttribute Boolean <optional>
false

If true, the id on the DOM element wont be changed.

Source:
  • jsplumb-api.js, line 49

setIdChanged(oldId, newId)

Notify jsPlumb that the element with oldId has had its id changed to newId. This method is equivalent to what jsPlumb does itself in the second step of the setId method.

Parameters:
Name Type Description
oldId String

Previous element id

newId String

Element's new id

Source:
  • jsplumb-api.js, line 51
See:

setSourceEnabled(el, state) → {jsPlumbInstance}

Sets the enabled state of one or more elements that were previously made a connection source with the makeSource method.

Parameters:
Name Type Description
el String | Element | Selector

The element in question.

state Boolean

True to enable the element(s), false to disable it.

Source:
  • jsplumb-api.js, line 98
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

setSuspendDrawing(val, repaintAfterwards)

Suspends drawing operations. This can (and should!) be used when you have a lot of connections to make or endpoints to register; it will save you a lot of time.

Parameters:
Name Type Argument Default Description
val Boolean

Indicates whether to suspend or not

repaintAfterwards Boolean <optional>
false

Instructs jsPlumb to do a full repaint after changing the suspension state.

Source:
  • jsplumb-api.js, line 17

setSuspendDrawing(val, doNotRepaintAfterwards)

Sets whether or not drawing is suspended. you should use this when doing bulk painting, like when first drawing a UI.

Parameters:
Name Type Argument Default Description
val Boolean

Whether or not to suspend drawing.

doNotRepaintAfterwards Boolean <optional>
false

If true, jsPlumb won't run a full repaint. Otherwise it will.

Source:
  • jsplumb-api.js, line 136

setTargetEnabled(el, state) → {jsPlumbInstance}

Sets the enabled state of one or more elements that were previously made a connection target with the makeTarget method. method.

Parameters:
Name Type Description
el String | Element | Selector

The element in question.

state Boolean

True to enable the element(s), false to disable it.

Source:
  • jsplumb-api.js, line 106
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

show(el, changeEndpoints) → {jsPlumbInstance}

Sets an element's connections to be visible.

Parameters:
Name Type Argument Default Description
el String | Element | Selector

Element to show connections for.

changeEndpoints Boolean <optional>
false

Whether or not to also change the visible state of the endpoints on the element. this also has a bearing on other connections on those endpoints: if their other endpoint is also visible, the connections are made visible.

Source:
  • jsplumb-api.js, line 41
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

suspendEvents(val)

Sets whether or not events are suspended.

Parameters:
Name Type Description
val Boolean

Whether or not to suspend events.

Inherited From:
Source:
  • util-api.js, line 26

toggleDraggable(el) → {Boolean}

Toggles draggability (sic?) of an element's Connections.

Parameters:
Name Type Description
el String | Element | Selector

The element for which to toggle draggability.

Source:
  • jsplumb-api.js, line 45
Returns:

The current draggable state.

Type
Boolean

toggleSourceEnabled(el) → {Boolean}

Toggles the source enabled state of the given element or elements.

Parameters:
Name Type Description
el String | Element | Selector

The element in question.

Source:
  • jsplumb-api.js, line 100
Returns:

The current enabled state of the source.

Type
Boolean

toggleTargetEnabled(el) → {Boolean}

Toggles the target enabled state of the given element or elements.

Parameters:
Name Type Description
el String | Element | Selector

The element in question.

Source:
  • jsplumb-api.js, line 108
Returns:

The current enabled state of the target.

Type
Boolean

toggleVisible(el, changeEndpoints) → {null}

Toggles visibility of an element's Connections.

Parameters:
Name Type Argument Default Description
el String | Element | Selector

Element to toggle visibility for.

changeEndpoints Boolean <optional>
false

Whether or not to also toggle the endpoints on the element.

Source:
  • jsplumb-api.js, line 43
Returns:

But should be updated to return the current state.

Type
null

unbind(event)

Clears either all listeners, or listeners for some specific event.

Parameters:
Name Type Argument Description
event String <optional>

Optional. constrains the clear to just listeners for this event.

Inherited From:
Source:
  • util-api.js, line 25

unmakeEverySource() → {jsPlumbInstance}

Resets all elements in this instance of jsPlumb so that none of them are connection sources.

Source:
  • jsplumb-api.js, line 94
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

unmakeEveryTarget() → {jsPlumbInstance}

Resets all elements in this instance of jsPlumb so that none of them are connection targets.

Source:
  • jsplumb-api.js, line 96
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

unmakeSource({String|Element|Selector|) → {jsPlumbInstance}

Sets the given element to no longer be a connection source.

Parameters:
Name Type Description
{String|Element|Selector|

el The element in question.

Source:
  • jsplumb-api.js, line 92
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance

unmakeTarget(el) → {jsPlumbInstance}

Sets the given element to no longer be a connection target.

Parameters:
Name Type Description
el String | Element | Selector

Element to unmake as a connection target.

Source:
  • jsplumb-api.js, line 87
Returns:

The current jsPlumb instance.

Type
jsPlumbInstance